import { UploadOutlined } from '@ant-design/icons';
import { Button, Typography, Upload } from 'antd';
import { useTranslation } from 'react-i18next';

import { PrismCode } from '@/components/SourceCode';
import { VulnerableProps } from '@/components/VulnerableTemplate/type';
import fileCode from '@/pages/vulnerable/code/file';
import { userProxy } from '@/store/userStore';

const codeProps: PrismCode = {
  language: 'tsx',
  code: fileCode.upload,
};

const Vulnerable: React.FC = () => {
  const { t } = useTranslation();

  return (
    <>
      <Typography.Title italic level={4}>
        {t('uploadFile')}
      </Typography.Title>
      <Upload
        action="/fileUpload"
        headers={{ Authorization: `Bearer ${userProxy.token}` }}
        listType="picture"
      >
        <Button icon={<UploadOutlined />}>{t('upload')}</Button>
      </Upload>
    </>
  );
};

const FileUpload: VulnerableProps = {
  vulnerable: <Vulnerable />,
  codeProps,
  causesSolutions: {
    type: 'file',
    hasCompare: false,
    solutions: 4,
  },
};

export default FileUpload;
